import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import i18n from '@I18N'
import Images from '@ASSET/Images'
import './index.scss'

interface Props {
  title: string;
  showLabel?: boolean;
  showMore?: boolean;
  onClickMore?: () => void;
  showIcon?: boolean;
  iconSource?: string;
  titleStyle?: string;
  titleContainer?: string;
  subTitle?: string;
  containerClass?: string;
  subTitleClass?: string;
  moreTextClass?: string;
  arrowClass?: string;
  moreText?: string;
}

const ModuleTitle: React.FC<Props> = ({
  title, showLabel, showMore, onClickMore, showIcon, iconSource, titleStyle, titleContainer = '',
  subTitle, containerClass = '', subTitleClass = '', moreText = '', moreTextClass = '', arrowClass = ''
}) => (
  <View className={`moduleTitle-container ${containerClass}`}>
    <View className={`title-left ${titleContainer}`}>
      {showLabel && <View className="title-label" />}
      <Text className={`title ${titleStyle}`}>{title}</Text>
      {!!subTitle && <Text className={`sub-title ${subTitleClass}`}>{subTitle}</Text>}
    </View>
    {showMore && (
      <View className="titleRight" onClick={onClickMore}>
        <Text className={`more ${moreTextClass}`}>{moreText || i18n.common.more()}</Text>
        {showIcon && <Image src={iconSource || Images.arrow.form} className={`arrow ${arrowClass}`} />}
      </View>
    )}
  </View>
)

ModuleTitle.defaultProps = {
  showIcon: true,
  showLabel: false,
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  onClickMore: () => {},
  iconSource: '',
  titleStyle: '',
  subTitle: '',
}

export default ModuleTitle
